<template>
	<view>
		<u-navbar :border-bottom="false" title="全屏选项卡"></u-navbar>
		<view class="content">
			
			<!-- 正文内容 -->
			<view>
				<u-tabs-swiper ref="uTabs" :list="tabBars" :current="current" @change="tabsChange" :is-scroll="false"
					swiperWidth="750"></u-tabs-swiper>
			</view>


			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper" v-for="(newsLists, i) in newsList" :key="i">
					<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">

						<view class="list">
							
							<block v-for="(shangpins,index) in newsLists.data" :key="index">
								<image style="width:400rpx;height: 400rpx;" :src="shangpins.shangpinimage"
									mode="scaleToFill"></image>
							</block>

							<view style="width: 100%;text-align: center;" v-if="i==current">
								<image src="/static/bg.png" v-if="newsLists.data.length==0" mode="aspectFit"></image>
								<u-loadmore v-else :status="newsLists.isLoading==-1?'nomore':'loading'" />
							</view>
							
						</view>

					</scroll-view>
				</swiper-item>
			</swiper>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBars: [{
					name: '十年'
				}, {
					name: '青春'
				}, {
					name: '之约'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

				newsList: [], //切换显示的数据
			};
		},

		mounted() {

			setTimeout(() => {
				this.tabBars.forEach((tabBar) => {
					this.newsList.push({
						data: [],
						isLoading: 1, //是否加载下一页
						num: 1 //当前页数
					});
				});
				this.getList(0); //默认执行第一页
			}, 350)

		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;

				this.getList(current); //切换获取数据
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log("下滑加载")
				this.getList() //下滑获取数据
			},
			
			
			getList(index) {

				if (!JSON.stringify(index)) {
					index = this.current
				} //没有传导航条索引
				if (this.newsList[index].isLoading) {
					this.$store.dispatch('testLists', {
						page: this.newsList[index].num,
						leixing: this.tabBars[index].id,
						limit: 20
					}).then(res => {
						if (this.newsList[index].num == 1) {
							this.newsList[index].data = res.data
						} else {
							this.newsList[index].data = this.newsList[index].data.concat(res.data)
						}
						this.newsList[index].num++
						this.newsList[index].isLoading = res.nextpage
					}).catch(err => {
						console.log(err)
					})
				}
			},

		}
	};
</script>

<style lang="less" scoped>
	.swiper {
		/* swiper高度=屏幕高度 */
		/*  #ifdef  APP-PLUS  */
		min-height: calc(100vh - 140upx);
		/*  #endif  */
		/*  #ifdef  H5||MP  */
		min-height: calc(100vh - 200upx);
		/*  #endif  */
		width: 100%;
	}
	.scroll {
		height: 100%;
		width: 100%;
	}
	/* list内容 */
	.list {
		padding: 20upx;
	}
</style>
